<template>
  <!-- 购买或者加入购物车的时候选择商品的种类 -->
  <u-popup
    mode="bottom"
    v-model="visibile"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
  >
    <view class="popup-body">
      <view class="popup-title"> 优惠详情 </view>
      <view class="close-icon" @click="hidePopup">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>
      <view class="integral-list">
        <view class="integral-item" @click="handleUse">
          <view class="item-text">
            <text> {{stores.integral_name}}抵扣 </text>
            <text v-if="price"> ¥{{ discount }} </text>
          </view>
          <view class="item-status">
            <view v-if="!use" class="default"></view>
            <view v-else class="icon-box">
              <i class="iconfont icon-success-fill"></i>
            </view>
          </view>
        </view>
        <view class="integral-item" @click="handleUnUse">
          <view class="item-text">不使用</view>
          <view class="item-status">
            <view v-if="use" class="default"></view>
            <view v-else class="icon-box">
              <i class="iconfont icon-success-fill"></i>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="foot-btns">
        <view class="foot-content">
          <view class="foot-btn" @click="handleConfirm">确定</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "",
  props: {
    useIntegral: {
      type: Boolean,
      default: true,
    },
    price: {
      type: [String,Number],
      default: "",
    },
  },
  mixins: [],
  components: {},
  data() {
    return {
      visibile: false,
      use: false,
      discount: "0",
    };
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    hidePopup() {
      this.visibile = false;
    },
    showPopup() {
      this.visibile = true;
      this.use = this.useIntegral;
      if (this.price) {
        this.discount = this.price;
      }
    },
    handleUnUse() {
      this.use = false;
    },
    handleUse() {
      this.use = true;
    },
    handleConfirm() {
      this.$emit("confirm", { status: this.use });
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-body {
  width: 100%;
  background-color: #ffffff;
  padding-top: 4.8vw;
  max-height: 80vh;
  position: relative;
  .popup-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
    margin-left: 4.8vw;
    padding-bottom: 4.267vw;
  }

  .close-icon {
    // width: 14.93vw;
    height: 14.93vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 34rpx;
    .icon-box {
      width: 5.34vw;
      height: 5.34vw;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f1f2;
      .iconfont {
        color: #8c8c8c;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }

  .integral-list {
    width: 100%;
    padding-left: 36rpx;
    padding-bottom: 13.34vw;
    .integral-item {
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f8f8f8;
      .item-text {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        text:nth-child(2) {
          color: #f0250e;
          margin-left: 4rpx;
        }
      }
      .item-status {
        padding-right: 36rpx;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
        .default {
          width: 32rpx;
          height: 32rpx;
          border: 1px solid #919191;
          border-radius: 50%;
        }
        .icon-box {
          width: 42rpx;
          height: 100%;
          position: absolute;
          right: 34rpx;
          top: 0;
          display: flex;
          align-items: center;
        }
        .iconfont {
          color: #f0250e;
          font-size: 46rpx;
        }
      }
    }
  }

  .foot-btns {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 121;
    border-top: 1px solid #f0f1f3;
    .foot-content {
      width: 100%;
      height: 13.34vw;
      padding: 0 4.8vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .foot-btn {
        width: 100%;
        height: 10.134vw;
        background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
        border-radius: 5.067vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }
      .btn-grey {
        background: #e4e4e4;
      }
    }

    .safe {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}
</style>
